<template>
  <div class="maxbox">
    <div class="top">
      <p>{{ leftText }}</p>
      <input
        @input="change"
        :value="modelValue"
        @focus="flag = '50%'"
        type="text"
        @blur="blur"
      />
    </div>
    <div :style="{ width: flag, backgroundColor: bag }" class="bot"></div>
    <div :style="{ width: flag, backgroundColor: bag }" class="rbot"></div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  props: {
    bag: String,
    modelValue: String,
    leftText: String,
  },
  setup(props, { emit }) {
    console.log(props.bag);
    function change(e) {
      emit("update:modelValue", e.target.value);
      emit("blur");
    }
    function blur() {
      emit("blur");
    }
    let flag = ref("0%");
    return { flag, change, blur };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.maxbox {
  width: 100%;
  height: 100px;
  position: relative;
}

.bot {
  height: 1px;
  position: absolute;
  background-color: rgb(224, 9, 9);
  bottom: 0;
  right: 50%;
  transition: 1.2s all;
}
.rbot {
  height: 1px;
  background-color: rgb(224, 9, 9);
  position: absolute;
  bottom: 0;
  left: 50%;
  transition: 1.2s all;
}
.top {
  height: 100px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(212, 205, 205);
  p {
    width: 27%;
    height: 60px;
    font-size: 29px;
    line-height: 60px;
  }
  input {
    width: 100%;
    height: 40px;
    background-color: transparent;
    outline: none;
    border: 0;
    font-size: 29px;
    color: rgb(160, 152, 152);
  }
}
</style>
